<div class="c-card-resource">
	<p aria-hidden="true" class="u-font-size-body u-text-transform-uppercase c-banner">
		<svg aria-hidden="true" focusable="false" class="c-banner__icon" width="22" height="22">
		{% if resourceType == "Featured" %}
			<use xlink:href="{{ '/img/icons.svg#featured' | url }}"></use>
		{% elif resourceType == "Animation" %}
			<use xlink:href="{{ '/img/icons.svg#animation' | url }}"></use>
		{% elif resourceType == "Blogs" %}
			<use xlink:href="{{ '/img/icons.svg#blog' | url }}"></use>
		{% elif resourceType == "Bookmarklets" %}
			<use xlink:href="{{ '/img/icons.svg#bookmarklets' | url }}"></use>
		{% elif resourceType == "Books" %}
			<use xlink:href="{{ '/img/icons.svg#books' | url }}"></use>
		{% elif resourceType == "Browser extensions" %}
			<use xlink:href="{{ '/img/icons.svg#browser-extensions' | url }}"></use>
		{% elif resourceType == "Colors" %}
			<use xlink:href="{{ '/img/icons.svg#color' | url }}"></use>
		{% elif resourceType == "Community help" %}
			<use xlink:href="{{ '/img/icons.svg#community-help' | url }}"></use>
		{% elif resourceType == "Courses" %}
			<use xlink:href="{{ '/img/icons.svg#courses' | url }}"></use>
		{% elif resourceType == "Design and user experience" %}
			<use xlink:href="{{ '/img/icons.svg#design' | url }}"></use>
		{% elif resourceType == "Development tools" %}
			<use xlink:href="{{ '/img/icons.svg#development' | url }}"></use>
		{% elif resourceType == "Email" %}
			<use xlink:href="{{ '/img/icons.svg#email' | url }}"></use>
		{% elif resourceType == "Employment" %}
			<use xlink:href="{{ '/img/icons.svg#employment' | url }}"></use>
		{% elif resourceType == "HTML and ARIA" %}
			<use xlink:href="{{ '/img/icons.svg#html-aria' | url }}"></use>
		{% elif resourceType == "Images and icons" %}
			<use xlink:href="{{ '/img/icons.svg#images' | url }}"></use>
		{% elif resourceType == "Conferences" %}
			<use xlink:href="{{ '/img/icons.svg#meetups' | url }}"></use>
		{% elif resourceType == "Meetups" %}
			<use xlink:href="{{ '/img/icons.svg#meetups' | url }}"></use>
		{% elif resourceType == "Mobile apps" %}
			<use xlink:href="{{ '/img/icons.svg#mobile-apps' | url }}"></use>
		{% elif resourceType == "Newsletters" %}
			<use xlink:href="{{ '/img/icons.svg#email' | url }}"></use>
		{% elif resourceType == "PDFs" %}
			<use xlink:href="{{ '/img/icons.svg#pdfs' | url }}"></use>
		{% elif resourceType == "Podcasts" %}
			<use xlink:href="{{ '/img/icons.svg#podcasts' | url }}"></use>
		{% elif resourceType == "Professional help" %}
			<use xlink:href="{{ '/img/icons.svg#professional-help' | url }}"></use>
		{% elif resourceType == "Screen readers" %}
			<use xlink:href="{{ '/img/icons.svg#screen-readers' | url }}"></use>
		{% elif resourceType == "Screen reader help" %}
			<use xlink:href="{{ '/img/icons.svg#screen-reader-help' | url }}"></use>
		{% elif resourceType == "Talks" %}
			<use xlink:href="{{ '/img/icons.svg#talks' | url }}"></use>
		{% elif resourceType == "Typography" %}
			<use xlink:href="{{ '/img/icons.svg#typography' | url }}"></use>
		{% elif resourceType == "Vision simulators" %}
			<use xlink:href="{{ '/img/icons.svg#vision-simulators' | url }}"></use>
		{% elif resourceType == "Additional resources" %}
			<use xlink:href="{{ '/img/icons.svg#featured' | url }}"></use>
		{% endif %}
		</svg>
		{{ resourceType }}
	</p>
	<div class="c-card-resource__body">
		<a class="c-card-resource__title" href="{{ resource.url | url }}">
			<h4 id="{{ resource.title | slugify }}">
				{{ resource.title }}
			</h4>
		</a>
		<p class="u-font-family-secondary u-font-size-body-small u-spacing-top-shortest u-text-transform-uppercase c-card-resource__meta">
			{{ resource.additional }}
		</p>
		<p class="u-font-family-secondary u-font-size-body-small u-spacing-top-medium c-card-resource__description">
			{{ resource.description }}
		</p>
	</div>
</div>
